<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <script src="../demo1/js/react.development.js"></script>
    <script src="../demo1/js/react-dom.development.js"></script>
    <script src="../demo1/js/babel.min.js"></script>
    <script src="./js/prop-types.js"></script> 

    <script type="text/babel">
        class Live extends React.Component{

            // 构造器
            constructor(props){
                super(props)
                 // 初始化状态
                this.state = {
                    data:null
                }
                console.log('constract');
            }

            add = ()=>{
                this.setState({
                    data:this.state.data+1
                })
            }
            forceAdd=()=>{
                // 强制更新
                this.forceUpdate()
            }

            close=()=>{
                ReactDOM.unmountComponentAtNode(document.querySelector('#test'))
            }

            // 页面将要挂载
            componentWillMount(){
                console.log('componentWillMount');
            }            

            // 页面挂载完毕
            componentDidMount(){
                console.log('componentDidMount');
            }

            // 组件将要卸载
            componentWillUnmount(){
                console.log('componentWillUnmout');
            }

            // 状态更新 控制组件更新的阀门
            shouldComponentUpdate(){
                console.log('shouldComponentUpdate');
                return true // 决定页面是否更新 默认为true
            }

            // 组件将要更新
            componentWillUpdate(){
                console.log('componentWillUpdate');
            }

            render() {
                console.log('-----render');

                const {data} = this.state
               return (
                    <div>
                        <h2>当前结果为:{data}</h2>
                        <button onClick={this.add}>加一</button>
                        <button onClick={this.close} >卸载组件</button>
                        <button onClick={this.forceAdd}>强制更新组件 加二</button>
                   </div>
               )  
            }

        }

        ReactDOM.render(<Live/>, document.querySelector('#test'))

    </script>
</body>
</html>